<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue2 起步</title>
	</head>
	<body>
		<div id="app">{{ message }}</div>
		
		<div id="app-2">
			<span v-bind:title="message">
				鼠标悬停几秒钟查看此处动态绑定的提示信息！
			</span>
		</div>
		
		<div id="app-3">
			<p v-if="seen">现在你看到我了</p>
		</div>
		
		<div id="app-4">
			<ol>
				<li v-for="todo in todos">
					{{ todo.name}}
				</li>
			</ol>
		</div>
		
		<div id="app-5">
			<p>{{message}}</p>
			<button v-on:click="reverseMessage">反转消息</button>
		</div>
		
		<div id="app-6">
			<p>{{message}}</p>
			<input v-model="message" >
		</div>
		
		<div id="app-7">
			<ol>
				<todo-item 
					v-for="item in groceryList"
					v-bind:todo="item"
					v-bind:key="item.id">
				</todo-item>
			</ol>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el:'#app',
			data:{
				message:'Hello Vue2'
			}
		})
		
		var app2 = new Vue({
			el:'#app-2',
			data:{
				message:'页面加载于 ' + new Date().toLocaleString()
			}
		})
		
		var app3 = new Vue({
			el:'#app-3',
			data:{
				seen:true
			}
		})
		
		var app4 = new Vue({
			el:'#app-4',
			data:{
				todos:[
					{name:'学习Javascript'},
					{name:'学习Vue'},
					{name:'整个牛项目'},
				]
			}
		})
		
		var app5 = new Vue({
			el:"#app-5",
			data:{
				message:'Hello Vue2'
			},
			methods:{
				reverseMessage:function(){
					this.message = this.message.split('').reverse().join('')
				}
			}
		})
		
		var app6 = new Vue({
			el:"#app-6",
			data:{
				message:'Hello Vue2'
			}
		})
		
		Vue.component('todo-item',{
			props:['todo'],
			template:'<li>{{ todo.text }}</li>'
		})
		var app7  = new Vue({
			el:"#app-7",
			data:{
				groceryList: [
				  { id: 0, text: '蔬菜' },
				  { id: 1, text: '奶酪' },
				  { id: 2, text: '随便其它什么人吃的东西' }
				]
			}
		})
	</script>
</html>